<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>空间说说</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/animate.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/line-awesome.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/style/css/line-awesome-font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/style/css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/slick.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/style.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/responsive.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/fontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/css/richEditor.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/common/layui/css/layui.css" media="all">
    <style>
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'microsoft yahei';
        }

        html, body {
            height: 100%;
        }

        #editor {
            width: 535px;
            margin-bottom: -100px;
            background: white;
        }

        .userImg {
            border-radius: 75%;
        }


        .flow-default {
            width: 550px;
            height: 100%;
            overflow: auto;
            font-size: small;
        }

    </style>
</head>


<body>
<div class="wrapper">
    <header>
        <div class="container">
            <div class="header-data">
                <div class="logo">
                    <a href="" title=""><img src="${pageContext.request.contextPath}/style/picture/logo.png" alt=""></a>
                </div><!--logo end-->
                <nav style="margin-left: 270px">
                    <ul>
                        <li>
                            <a href="" title="">
                                <span><img src="${pageContext.request.contextPath}/style/picture/icon1.png"
                                           alt=""></span>
                                主页
                            </a>
                        </li>
                        <li>
                            <a href="profiles.jsp" title="">
                                <span><img src="${pageContext.request.contextPath}/style/picture/icon4.png"
                                           alt=""></span>
                                好友
                            </a>
                            <ul>
                                <li><a href="addprofiles.jsp" title="">添加好友</a></li>
                                <li><a href="profiles.jsp" title="">我的好友</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav><!--nav end-->
                <div class="menu-btn">
                    <a href="#" title=""><i class="fa fa-bars"></i></a>
                </div><!--menu-btn end-->
                <div class="user-account">
                    <div class="user-info">
                        <c:if test="${sessionScope.user.userImg != null }">
                            <img src="${pageContext.request.contextPath}/user/getUserImg?fileName=${sessionScope.user.userImg}"
                                 alt="about image" class="img-fluid userImg" style="width:30px;heigh:30px" name="userImg"
                                 id="smallUserImg">
                        </c:if>
                        <c:if test="${sessionScope.user.userImg == null }">
                            <img src="${pageContext.request.contextPath}/user/getUserImg?fileName=labi.jpg" alt="about image"
                                 class="img-fluid userImg" style="width:30px;heigh:30px" name="userImg" id="smallUserImg">
                        </c:if>
                        <a href="#" title="">${sessionScope.user.userName}</a>
                        <i class="la la-sort-down"></i>
                    </div>
                    <div class="user-account-settingss">

                        <h3 class="tc"><a href="${pageContext.request.contextPath}/user/exit" title="">退出</a></h3>
                    </div><!--user-account-settingss end-->
                </div>
            </div><!--header-data end-->
        </div>
    </header><!--header end-->

    <main>
        <div class="main-section">
            <div class="container">
                <div class="main-section-data">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 pd-left-none no-pd">
                            <div class="main-left-sidebar no-margin">
                                <div class="user-data full-width">
                                    <div class="user-profile">
                                        <div class="username-dt">
                                            <div class="usr-pic">
                                                <%--                                                <img src="${pageContext.request.contextPath}/style/picture/user-pic.png" alt="">--%>
                                                <c:if test="${sessionScope.user.userImg != null }">
                                                    <a data-toggle="modal" data-target="#updatePic"><img
                                                            src="${pageContext.request.contextPath}/user/getUserImg?fileName=${sessionScope.user.userImg}"
                                                            alt="about image" class="img-fluid userImg"
                                                            style="width:100px;heigh:100px" name="userImg" id="userImg"></a>
                                                </c:if>
                                                <c:if test="${sessionScope.user.userImg == null }">
                                                    <a data-toggle="modal" data-target="#updatePic"><img
                                                            src="${pageContext.request.contextPath}/user/getUserImg?fileName=labi.jpg"
                                                            alt="about image" class="img-fluid userImg"
                                                            style="width:100px;heigh:100px" name="userImg"></a>
                                                </c:if>
                                            </div>
                                        </div><!--username-dt end-->
                                        <div class="user-specs">
                                            <h3>${sessionScope.user.userName}</h3>
                                            <span>${sessionScope.user.userSign}</span>
                                        </div>
                                    </div><!--user-profile end-->
                                    <ul class="user-fw-status">
                                        <li>
                                            <h4>好友</h4>
                                            <span id="friendCount"></span>
                                        </li>
                                        <li>
                                            <!-- Button trigger modal -->
                                            <a href="${pageContext.request.contextPath}/liaotian.jsp"><h4>聊一聊</h4></a>
                                        </li>
                                        <li>
                                            <!-- Button trigger modal -->
                                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                                    data-target="#myModal">
                                                发布动态
                                            </button>
                                        </li>

                                    </ul>
                                </div><!--user-data end-->
                                <div class="suggestions full-width">
                                    <div class="sd-title">
                                        <h3>好友申请</h3>
                                        <i class="la la-ellipsis-v"></i>
                                    </div><!--sd-title end-->
                                    <div class="suggestions-list" id="LAY_demo2" style="overflow-y: scroll;height: 339px">

                                        <%--<div class="view-more">
                                            <a href="#" title="">查看更多</a>
                                        </div>--%>
                                    </div><!--suggestions-list end-->
                                </div><!--suggestions end-->
                                <div class="tags-sec full-width">
                                    <ul>
                                        <li><a href="#" title="">Help Center</a></li>
                                        <li><a href="#" title="">About</a></li>
                                        <li><a href="#" title="">Privacy Policy</a></li>
                                        <li><a href="#" title="">Community Guidelines</a></li>
                                        <li><a href="#" title="">Cookies Policy</a></li>
                                        <li><a href="#" title="">Career</a></li>
                                        <li><a href="#" title="">Language</a></li>
                                        <li><a href="#" title="">Copyright Policy</a></li>
                                    </ul>
                                    <div class="cp-sec">
                                        <img src="${pageContext.request.contextPath}/style/picture/logo2.png" alt="">
                                        <p><img src="${pageContext.request.contextPath}/style/picture/cp.png" alt="">Copyright
                                            2017</p>
                                    </div>
                                </div><!--tags-sec end-->
                            </div><!--main-left-sidebar end-->
                        </div>
                        <div class="col-lg-6 col-md-8 no-pd">
                            <div class="main-ws-sec">


                                <div class="posts-section">

                                    <div class="posty" id="LAY_posty">
                                        <!-- 流加载 -->
                                        <ul class="flow-default" id="LAY_demo1"></ul>
                                    </div><!--posty end-->

                                    <%--                                    <form action="${pageContext.request.contextPath}/NewsController/addNews">--%>
                                    <%--                                        <input type="text" name="newsDetail" placeholder="请输入你想说的话……">--%>
                                    <%--                                        <iframe id="content" src="editor.jsp" style="width: 600px"></iframe>--%>
                                    <div style="height: 100px"><br><br></div>
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document" style="width:1000px">
                                            <div class="modal-content" style="width:850px;height: 500px">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close"><span aria-hidden="true">&times;</span>
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel"
                                                        style="text-align: center;">评论区</h4>

                                                </div>
                                                <div class="modal-body">
                                                    地点： <input type="text" style="width: 700px;" id="newsAdd">
                                                    <br><br><br>
                                                    <div id="editor">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">

                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        关闭
                                                    </button>
                                                    <button type="button" id="addbtn" class="btn btn-primary">发布
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <script src="${pageContext.request.contextPath}/style/js/richEditor.min.js"></script>
                                    <script>

                                        var editor = new RichEditor("#editor", {
                                            width: 785,
                                            height: 260,
                                            toolBg: "#eee",
                                            buttons: {
                                                heading: {
                                                    title: "标题",
                                                    icon: "\uf1dc"
                                                },
                                                code: {
                                                    title: "引用",
                                                    icon: "\uf10d"
                                                },
                                                bold: {
                                                    title: "加粗",
                                                    icon: "\uf032"
                                                },
                                                italic: {
                                                    title: "斜体",
                                                    icon: "\uf033"
                                                },
                                                underline: {
                                                    title: "下划线",
                                                    icon: "\uf0cd"
                                                },
                                                strikethrough: {
                                                    title: "删除线",
                                                    icon: "\uf0cc"
                                                },
                                                foreColor: {
                                                    title: "字体颜色",
                                                    icon: "\uf1fc"
                                                },
                                                backColor: {
                                                    title: "背景色",
                                                    icon: "\uf043"
                                                },
                                                justifyLeft: {
                                                    title: "居左",
                                                    icon: "\uf036"
                                                },
                                                justifyCenter: {
                                                    title: "居中",
                                                    icon: "\uf037"
                                                },
                                                justifyRight: {
                                                    title: "居右",
                                                    icon: "\uf038"
                                                },
                                                justifyFull: {
                                                    title: "两端对齐",
                                                    icon: "\uf039"
                                                },
                                                insertOrderedList: {
                                                    title: "有序列表",
                                                    icon: "\uf0cb"
                                                },
                                                insertUnorderedList: {
                                                    title: "无序列表",
                                                    icon: "\uf0ca"
                                                },
                                                indent: {
                                                    title: "indent",
                                                    icon: "\uf03c"
                                                },
                                                outdent: {
                                                    title: "outdent",
                                                    icon: "\uf03b"
                                                },
                                                createLink: {
                                                    title: "链接",
                                                    icon: "\uf0c1"
                                                },
                                                insertImage: {
                                                    title: "插入图片",
                                                    icon: "\uf03e"
                                                },
                                                emotion: {
                                                    title: "表情",
                                                    icon: "\uf118"
                                                },
                                                fullscreen: {
                                                    title: "全屏",
                                                    icon: "\uf066"
                                                },
                                                save: {
                                                    title: "保存",
                                                    icon: "\uf0c7",
                                                    click: function () {
                                                        console.log(editor.getText());
                                                    }
                                                }
                                            }
                                        });

                                    </script>
                                </div><!--posts-section end-->
                            </div><!--main-ws-sec end-->
                        </div>
                        <div class="col-lg-3 pd-right-none no-pd">
                            <div class="right-sidebar">
                                <div class="widget widget-about">
                                    <img src="${pageContext.request.contextPath}/style/picture/wd-logo.png" alt="">
                                    <h3>Track Time on Workwise</h3>
                                    <span>Pay only for the Hours worked</span>
                                    <div class="sign_link">
                                        <h3><a href="#" title="">Sign up</a></h3>
                                        <a href="#" title="">Learn More</a>
                                    </div>
                                </div><!--widget-about end-->
                                <div class="widget widget-jobs">
                                    <div class="sd-title">
                                        <h3>Top Jobs</h3>
                                        <i class="la la-ellipsis-v"></i>
                                    </div>
                                    <div class="jobs-list">
                                        <div class="job-info">
                                            <div class="job-details">
                                                <h3>Senior Product Designer</h3>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
                                            </div>
                                            <div class="hr-rate">
                                                <span>$25/hr</span>
                                            </div>
                                        </div><!--job-info end-->
                                        <div class="job-info">
                                            <div class="job-details">
                                                <h3>Senior UI / UX Designer</h3>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
                                            </div>
                                            <div class="hr-rate">
                                                <span>$25/hr</span>
                                            </div>
                                        </div><!--job-info end-->
                                        <div class="job-info">
                                            <div class="job-details">
                                                <h3>Junior Seo Designer</h3>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
                                            </div>
                                            <div class="hr-rate">
                                                <span>$25/hr</span>
                                            </div>
                                        </div><!--job-info end-->
                                        <div class="job-info">
                                            <div class="job-details">
                                                <h3>Senior PHP Designer</h3>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
                                            </div>
                                            <div class="hr-rate">
                                                <span>$25/hr</span>
                                            </div>
                                        </div><!--job-info end-->
                                        <div class="job-info">
                                            <div class="job-details">
                                                <h3>Senior Developer Designer</h3>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
                                            </div>
                                            <div class="hr-rate">
                                                <span>$25/hr</span>
                                            </div>
                                        </div><!--job-info end-->
                                    </div><!--jobs-list end-->
                                </div><!--widget-jobs end-->
                            </div>
                        </div><!-- main-section-data end-->
                    </div>
                </div>
    </main>


    <div class="post-popup pst-pj">
        <div class="post-project">
            <h3>Post a project</h3>
            <div class="post-project-fields">
                <form>
                    <div class="row">
                        <div class="col-lg-12">
                            <input type="text" name="title" placeholder="Title">
                        </div>
                        <div class="col-lg-12">
                            <div class="inp-field">
                                <select>
                                    <option>Category</option>
                                    <option>Category 1</option>
                                    <option>Category 2</option>
                                    <option>Category 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <input type="text" name="skills" placeholder="Skills">
                        </div>
                        <div class="col-lg-12">
                            <div class="price-sec">
                                <div class="price-br">
                                    <input type="text" name="price1" placeholder="Price">
                                    <i class="la la-dollar"></i>
                                </div>
                                <span>To</span>
                                <div class="price-br">
                                    <input type="text" name="price1" placeholder="Price">
                                    <i class="la la-dollar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <textarea name="description" placeholder="Description"></textarea>
                        </div>
                        <div class="col-lg-12">
                            <ul>
                                <li>
                                    <button class="active" type="submit" value="post">Post</button>
                                </li>
                                <li><a href="#" title="">Cancel</a></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div><!--post-project-fields end-->
            <a href="#" title=""><i class="la la-times-circle-o"></i></a>
        </div><!--post-project end-->
    </div><!--post-project-popup end-->

    <div class="post-popup job_post">
        <div class="post-project">
            <h3>Post a job</h3>
            <div class="post-project-fields">
                <form>
                    <div class="row">
                        <div class="col-lg-12">
                            <input type="text" name="title" placeholder="Title">
                        </div>
                        <div class="col-lg-12">
                            <div class="inp-field">
                                <select>
                                    <option>Category</option>
                                    <option>Category 1</option>
                                    <option>Category 2</option>
                                    <option>Category 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <input type="text" name="skills" placeholder="Skills">
                        </div>
                        <div class="col-lg-6">
                            <div class="price-br">
                                <input type="text" name="price1" placeholder="Price">
                                <i class="la la-dollar"></i>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="inp-field">
                                <select>
                                    <option>Full Time</option>
                                    <option>Half time</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <textarea name="description" placeholder="Description"></textarea>
                        </div>
                        <div class="col-lg-12">
                            <ul>
                                <li>
                                    <button class="active" type="submit" value="post">Post</button>
                                </li>
                                <li><a href="#" title="">Cancel</a></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div><!--post-project-fields end-->
            <a href="#" title=""><i class="la la-times-circle-o"></i></a>
        </div><!--post-project end-->
    </div><!--post-project-popup end-->
</div><!--theme-layout end-->

<!-- Smooth scrolling -->
<!-- 修改头像模态框 -->
<div class="modal fade" id="updatePic">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">修改头像</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form id="updatePicForm" enctype="multipart/form-data" method="post">
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <input type="file" accept="image/*" name="upload" onchange="showImg(this)"/>
                    <img src="" style="width: 100px;height:100px" alt="" id="img">
                </div>
            </form>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" id="btup">确认修改</button>
            </div>


        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="style/js/jquery.min.js"></script>
<script type="text/javascript" src="style/common/layui/layui.js"></script>
<script type="text/javascript" src="style/js/popper.js"></script>
<script type="text/javascript" src="style/js/bootstrap.min.js"></script>
<script type="text/javascript" src="style/js/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="style/js/slick.min.js"></script>
<script type="text/javascript" src="style/js/scrollbar.js"></script>
<script type="text/javascript" src="style/js/script.js"></script>
</body>

<script>
    $(function () {

        $("#addbtn").click(function () {
            $("#myModal").modal('hide');
            $.ajax({
                url: "${pageContext.request.contextPath}/NewsController/addNews",
                type: "GET",
                data: {
                    content: editor.getText(),
                    address: $("#newsAdd").val()
                },
                dataType: "text",
                success: function () {
                   $("#LAY_demo1").empty()
                    layui.use('flow', function () {
                    	layui.showNews();
                    });
                }
            })
        });

        $.ajaxSetup({
            complete: function (xhr, status) {
                //拦截器实现超时跳转到登录页面
                // 通过xhr取得响应头
                var REDIRECT = xhr.getResponseHeader("REDIRECT");
                //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                if (REDIRECT == "REDIRECT") {
                    var win = window;
                    while (win != win.top) {
                        win = win.top;
                    }
                    //重新跳转到 login.html
                    win.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        });

        //加载动态
        layui.use('flow', function () {
            layui.showNews();
        });

        //加载好友申请
        layui.use('flow', function () {
            layui.showFriends();
        });

        //同意申请
        $(document).on("click",".agree",function () {
            var id = $(this).data("id");
            var fid = $(this).data("fid");
            $.post("${pageContext.request.contextPath}/FriendController/agreeFriend",{fid:fid,ID:id},function (b) {
                if(b){
                    $("#LAY_demo2").empty();
                    layui.use('flow', function () {
                        layui.showFriends();
                    });
                }
            })
        })

        //拒绝申请
        $(document).on("click",".jujue",function () {
            var id = $(this).data("id");
            var fid = $(this).data("fid");
            $.post("${pageContext.request.contextPath}/FriendController/jujueFriend",{fid:fid,id:id},function (b) {
                if(b){
                    $("#LAY_demo2").empty();
                    layui.use('flow', function () {
                        layui.showFriends();
                    });
                }
            })
        })


        //修改头像
        $("#btup").click(function () {
            var formData = new FormData($("#updatePicForm")[0]);
            $.ajax({
                async: true,
                url: "${pageContext.request.contextPath}/user/uploadUserImg",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (path) {
                    $("#updatePic").modal('hide');
                    if (path != null) {
                        $("#userImg").attr("src", "${pageContext.request.contextPath}/user/getUserImg?fileName=" + path + "&a=" + new Date().getTime());
                        $("#smallUserImg").attr("src", "${pageContext.request.contextPath}/user/getUserImg?fileName=" + path + "&a=" + new Date().getTime());
                        $("#LAY_demo1").empty()
                        layui.use('flow', function () {
                            layui.showNews();
                        });
                    }
                }
            })
        })

        $.post("${pageContext.request.contextPath}/FriendController/friendCount", function (count) {
            $("#friendCount").html(count);
        })






    })
</script>
<script>
    function del(newsId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/NewsController/deleteNews",
            data: {newsId: newsId},
            dataType: "JSON",
            success: function (b) {
                $("#LAY_demo1").empty()
                layui.use('flow', function () {
                    layui.showNews();
                });
            }
        })

    }

    function showImg(obj) {
        var file = $(obj)[0].files[0];    //获取文件信息
        var imgdata = '';
        if (file) {
            var reader = new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload = function (evt) {   //读取操作完成时触发。
                $("#img").attr('src', evt.target.result)  //将img标签的src绑定为DataURL
            };
        } else {
            alert("上传失败");
        }
    }

    //封装加载好友动态的方法
        layui.define('flow', function (exports) {
            var flow = layui.flow;
            exports('showNews',function () {
                flow.load({
                    elem: '#LAY_demo1' //流加载容器
                    ,isAuto:true
                    ,end:"滑到底了噢~~"
                    , done: function (page, next) { //执行下一页的回调
                        var lis = [];
                        $.post("${pageContext.request.contextPath}/NewsController/queryNews2",{pn:page,ps:3},function (pageInfo) {
                            layui.each(pageInfo.list,function (i,obj) {
                                if(obj.user.userId == "${sessionScope.user.userId}"){
                                    lis.push("<div class=\"post-bar no-margin\">\n" +
                                        "                        <div class=\"post_topbar\">\n" +
                                        "                        <div class=\"usy-dt\">\n" +
                                        "                        <img src=\"${pageContext.request.contextPath}/user/getUserImg?fileName="+obj.user.userImg+"\" style=\"width:45px;heigh:45px\" alt=\"\">\n" +
                                        "                        <div class=\"usy-name\">\n" +
                                        "                        <h3>" + obj.user.userName + "</h3>\n" +
                                        "                    <span><img src=\"${pageContext.request.contextPath}/style/picture/clock.png\"\n" +
                                        "                    alt=\"\">" + obj.newsTime + "</span>\n" +
                                        "                    </div>\n" +
                                        "                    </div>\n" +
                                        "   <a href=\"javascript:void(0)\" onclick=\"del(" + obj.newsId + ")\">删除</a>\n" +
                                        "                    </div>\n" +
                                        "                    <div class=\"epi-sec\">\n" +
                                        "                        <ul class=\"descp\">\n" +
                                        "                        <li><img src=\"${pageContext.request.contextPath}/style/picture/icon8.png\"\n" +
                                        "                    alt=\"\"><span>Epic Coder</span></li>\n" +
                                        "                    <li><img src=\"${pageContext.request.contextPath}/style/picture/icon9.png\" alt=\"\"><span>" + obj.newsAdd + "</span>\n" +
                                        "                        </li>\n" +
                                        "                        </ul>\n" +
                                        "                        <ul class=\"bk-links\">\n" +
                                        "                        <li><a href=\"#\" title=\"\"><i class=\"la la-bookmark\"></i></a></li>\n" +
                                        "                    <li><a href=\"#\" title=\"\"><i class=\"la la-envelope\"></i></a></li>\n" +
                                        "                    </ul>\n" +
                                        "                    </div>\n" +
                                        "                    <div class=\"job_descp\">\n" +

                                        "                    <p>" + obj.newsDetail + "<a href=\"#\" title=\"\"></a></p>\n" +

                                        "                    </div>\n" +
                                        "                    <div class=\"job-status-bar\">\n" +
                                        "                        <ul class=\"like-com\">\n" +
                                        "                        <li>\n" +
                                        "                        <a href=\"#\"><i class=\"la la-heart\"></i> Like</a>\n" +
                                        "                    <img src=\"${pageContext.request.contextPath}/style/picture/liked-img.png\" alt=\"\">\n" +
                                        "                        <span>25</span>\n" +
                                        "                        </li>\n" +
                                        "                        <li><a href=\"#\" title=\"\" class=\"com\"><img\n" +
                                        "                    src=\"${pageContext.request.contextPath}/style/picture/com.png\" alt=\"\"> Comment 15</a></li>\n" +
                                        "                    </ul>\n" +
                                        "                    <a><i class=\"la la-eye\"></i>Views 50</a>\n" +
                                        "                    </div>\n" +
                                        "                    </div><!--post-bar end-->\n" +
                                        "<hr>")
                                }else{
                                    lis.push("<div class=\"post-bar no-margin\">\n" +
                                        "                        <div class=\"post_topbar\">\n" +
                                        "                        <div class=\"usy-dt\">\n" +
                                        "                        <img src=\"${pageContext.request.contextPath}/user/getUserImg?fileName="+obj.user.userImg+"\" style=\"width:45px;heigh:45px\" alt=\"\">\n" +
                                        "                        <div class=\"usy-name\">\n" +
                                        "                        <h3>" + obj.user.userName + "</h3>\n" +
                                        "                    <span><img src=\"${pageContext.request.contextPath}/style/picture/clock.png\"\n" +
                                        "                    alt=\"\">" + obj.newsTime + "</span>\n" +
                                        "                    </div>\n" +
                                        "                    </div>\n" +
                                        "                    </div>\n" +
                                        "                    <div class=\"epi-sec\">\n" +
                                        "                        <ul class=\"descp\">\n" +
                                        "                        <li><img src=\"${pageContext.request.contextPath}/style/picture/icon8.png\"\n" +
                                        "                    alt=\"\"><span>Epic Coder</span></li>\n" +
                                        "                    <li><img src=\"${pageContext.request.contextPath}/style/picture/icon9.png\" alt=\"\"><span>" + obj.newsAdd + "</span>\n" +
                                        "                        </li>\n" +
                                        "                        </ul>\n" +
                                        "                        <ul class=\"bk-links\">\n" +
                                        "                        <li><a href=\"#\" title=\"\"><i class=\"la la-bookmark\"></i></a></li>\n" +
                                        "                    <li><a href=\"#\" title=\"\"><i class=\"la la-envelope\"></i></a></li>\n" +
                                        "                    </ul>\n" +
                                        "                    </div>\n" +
                                        "                    <div class=\"job_descp\">\n" +

                                        "                    <p>" + obj.newsDetail + "<a href=\"#\" title=\"\"></a></p>\n" +

                                        "                    </div>\n" +
                                        "                    <div class=\"job-status-bar\">\n" +
                                        "                        <ul class=\"like-com\">\n" +
                                        "                        <li>\n" +
                                        "                        <a href=\"#\"><i class=\"la la-heart\"></i> Like</a>\n" +
                                        "                    <img src=\"${pageContext.request.contextPath}/style/picture/liked-img.png\" alt=\"\">\n" +
                                        "                        <span>25</span>\n" +
                                        "                        </li>\n" +
                                        "                        <li><a href=\"#\" title=\"\" class=\"com\"><img\n" +
                                        "                    src=\"${pageContext.request.contextPath}/style/picture/com.png\" alt=\"\"> Comment 15</a></li>\n" +
                                        "                    </ul>\n" +
                                        "                    <a><i class=\"la la-eye\"></i>Views 50</a>\n" +
                                        "                    </div>\n" +
                                        "                    </div><!--post-bar end-->\n" +
                                        "<hr>")
                                }

                            })
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < pageInfo.pages);
                        })
                    }
                });
            })

        });


    //封装加载好友列表的方法
    layui.define('flow', function (exports) {
        var flow = layui.flow;
        exports('showFriends',function () {
        flow.load({
            elem: '#LAY_demo2' //流加载容器
            ,isAuto:true
            ,end:"滑到底了噢~~"
            ,scrollElem:'#LAY_demo2'
            , done: function (page, next) { //执行下一页的回调
                var lis = [];
                $.post("${pageContext.request.contextPath}/FriendController/queryFirendApply",{pn:page,ps:4},function (pageInfo) {
                    layui.each(pageInfo.list,function (i,obj) {
                        lis.push("<div class=\"suggestion-usd\">\n" +
                            "     <img src=\"${pageContext.request.contextPath}/user/getUserImg?fileName="+obj.user.userImg+"\" style=\"width:30px;heigh:30px\" alt=\"\">\n" +
                            "      <div class=\"sgt-text\">\n" +
                            "       <h4>"+obj.user.userName+"</h4>\n" +
                            "       <span>"+(obj.user.userSign == null ? "" : obj.user.userSign)+"</span>\n" +
                            "     </div>\n" +
                            "       <span><i class=\"la jujue\" data-id=\""+obj.id+"\" data-fid=\""+obj.user.userId+"\">-</i></span>\n" +
                            "       <span><i class=\"la la-plus agree\" data-id=\""+obj.id+"\" data-fid=\""+obj.user.userId+"\"></i></span>\n" +
                            "       </div>")
                    })
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < pageInfo.pages);
                })
            }
        });
        })
    });

</script>
</html>
